// Input 组件样式文件
// 导入全局样式变量和混合器
@import '../../styles/variables';
@import '../../styles/mixin';

/**
 * Input 组件样式
 * 定义输入框的各种状态和变体样式
 */

// 输入框包装器样式
.input-wrapper {
  display: inline-block;
  width: 100%;
  margin-bottom: $spacing-md;

  // 输入框标签样式
  .input-label {
    display: block;
    margin-bottom: $spacing-xs;
    font-size: $font-size-base;
    font-weight: $font-weight-normal;
    color: $gray-700;
    line-height: 1.5;
  }
}

// 输入框容器样式
.input-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid $gray-400;
  border-radius: $border-radius;
  background-color: $white;
  transition: all $transition-duration $transition-timing-function;

  // 输入框基础样式
  .input {
    flex: 1;
    width: 100%;
    padding: $spacing-sm $spacing-md;
    border: none;
    outline: none;
    font-size: $font-size-base;
    font-family: inherit;
    line-height: 1.5;
    color: $gray-900;
    background-color: transparent;
    transition: all $transition-duration $transition-timing-function;

    // 占位符文本样式
    &::placeholder {
      color: $gray-500;
      opacity: 1;
    }

    // 禁用状态样式
    &:disabled {
      background-color: $gray-100;
      color: $gray-500;
      cursor: not-allowed;
      opacity: 0.6;
    }

    // 只读状态样式
    &:read-only {
      background-color: $gray-50;
      color: $gray-700;
    }

    // 聚焦状态样式
    &:focus {
      box-shadow: 0 0 0 2px rgba($primary, 0.2);
    }
  }

  // 输入框尺寸变体
  // 默认尺寸输入框
  .input-default {
    padding: $spacing-sm $spacing-md;
    font-size: $font-size-base;
  }

  // 大尺寸输入框
  .input-lg {
    padding: $spacing-md $spacing-lg;
    font-size: $font-size-lg;
  }

  // 小尺寸输入框
  .input-sm {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
  }

  // 前缀样式
  .input-prefix {
    display: flex;
    align-items: center;
    padding: 0 $spacing-sm;
    color: $gray-600;
    font-size: $font-size-base;
    background-color: $gray-50;
    border-right: 1px solid $gray-300;
    border-radius: $border-radius 0 0 $border-radius;
  }

  // 后缀样式
  .input-suffix {
    display: flex;
    align-items: center;
    padding: 0 $spacing-sm;
    color: $gray-600;
    font-size: $font-size-base;
    background-color: $gray-50;
    border-left: 1px solid $gray-300;
    border-radius: 0 $border-radius $border-radius 0;
  }

  // 有前缀时的输入框样式
  .input-with-prefix {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  // 有后缀时的输入框样式
  .input-with-suffix {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  // 输入框状态变体
  // 错误状态
  .input-error {
    border-color: $danger;

    &:focus {
      box-shadow: 0 0 0 2px rgba($danger, 0.2);
    }
  }

  // 成功状态
  .input-success {
    border-color: $success;

    &:focus {
      box-shadow: 0 0 0 2px rgba($success, 0.2);
    }
  }

  // 警告状态
  .input-warning {
    border-color: $warning;

    &:focus {
      box-shadow: 0 0 0 2px rgba($warning, 0.2);
    }
  }

  // 禁用状态容器样式
  .input-disabled {
    background-color: $gray-100;
    border-color: $gray-300;

    .input-prefix,
    .input-suffix {
      background-color: $gray-200;
      color: $gray-500;
    }
  }

  // 错误状态容器样式
  .input-error ~ .input-container {
    border-color: $danger;
  }

  // 成功状态容器样式
  .input-success ~ .input-container {
    border-color: $success;
  }

  // 警告状态容器样式
  .input-warning ~ .input-container {
    border-color: $warning;
  }
}

// 错误信息样式
.input-error-message {
  margin-top: $spacing-xs;
  font-size: $font-size-sm;
  color: $danger;
  line-height: 1.4;
}

// 响应式设计
@media (max-width: $breakpoint-sm) {
  .input-container {
    .input {
      padding: $spacing-sm;
    }

    .input-lg {
      padding: $spacing-md;
    }

    .input-sm {
      padding: $spacing-xs;
    }
  }
}

// 暗色主题支持
[data-theme='dark'] {
  .input-container {
    border-color: $gray-600;
    background-color: $gray-800;

    .input {
      color: $gray-100;
      background-color: $gray-800;

      &::placeholder {
        color: $gray-500;
      }

      &:disabled {
        background-color: $gray-700;
        color: $gray-500;
      }

      &:read-only {
        background-color: $gray-700;
        color: $gray-300;
      }
    }

    .input-prefix,
    .input-suffix {
      background-color: $gray-700;
      color: $gray-300;
      border-color: $gray-600;
    }

    .input-disabled {
      background-color: $gray-700;
      border-color: $gray-600;

      .input-prefix,
      .input-suffix {
        background-color: $gray-600;
        color: $gray-500;
      }
    }
  }
}